/*
 * @Author: lyuan2018
 * @Date: 2019-08-08 10:59:35
 * @Last Modified by: lyuan2018
 * @Last Modified time: 2020-08-13 10:59:17
 * 邮件设置--账户管理--监测结果页面
 */
import React from 'react';
import { toJS } from 'mobx';
import { Modal, Icon } from 'antd';
import { WeaLocaleProvider } from 'ecCom';
import classnames from 'classnames';

const getLabel = WeaLocaleProvider.getLabel;

export const ExchangeResult = (validateLoading, validateResult) => {
  const mailState = toJS(validateResult) == null ? false : toJS(validateResult).mailState;
  const isResultNull = toJS(validateResult) == null; // 接口异常返回情况下判定
  const preCls = 'account-result';
  const prefixCls = classnames({
    [`${preCls}-container-main-body`]: true,
    'success-loading': validateLoading || mailState,
  });
  const noResult = toJS(validateResult) == null ? false : Object.keys(validateResult).length === 0;
  const resultList = [
    {
      key: 'exchangeSendState',
      jsonKey: 'exchangeSendState',
      content: `${getLabel(82878, '登录到发送邮件服务器')}`,
    },
    {
      key: 'exchangeSendState',
      jsonKey: 'exchangeSendState',
      content: `${getLabel(82883, '发送邮件测试')}`,
    },
    {
      key: 'exchangeLoginState',
      jsonKey: 'exchangeLoginState',
      content: `${getLabel(82882, '登录到接收邮件服务器')}`,
    },
  ];
  return (
    <div className={preCls}>
       <div className={`${preCls}-container-header`}>
          <div className="icon">
            {
              validateLoading ? <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@8mzfvr`} type="loading" className="validate-loading" /> :
              <img src={`/images/ecology9/email/add_account_${mailState ? 'succ' : 'fail'}.png`} />
            }
          </div>
          <p className="result-info">
            { validateLoading || noResult ? '' : mailState ? getLabel(384432, '邮件账户检测通过！') : getLabel(82862, '邮件账户检测不通过！请检查设置！')}
          </p>
        </div>

      <div className={`${preCls}-container-main`}>
      {isResultNull ?
        <div className={prefixCls}>
          <span style={{ position: 'absolute', textAlign: 'center', width: '60%', color: '#ff4646' }}>配置出错，请联系系统管理员</span>
        </div>
        :
        <div className={prefixCls}>
          {
            resultList.map(item => (
                <div key={item.key} className={`${preCls}-container-main-check`}>
                  <span className={`${preCls}-container-main-check-item`}>
                    {
                      validateLoading || noResult ? <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@oc3jvb@loading`} type="loading" /> :
                      <i className={`icon-coms-${toJS(validateResult).json[item.jsonKey].ischeck ? 'Upload-successfully-o' : 'Clear'}`} />
                    }
                    {item.content}
                  </span>
                  {
                    !validateLoading && !noResult && !toJS(validateResult).json[item.jsonKey].ischeck && (
                      <span className={`${preCls}-container-main-check-nopass`}>
                        <i className="icon-coms-Prompt" />
                        <span className="msg" title={toJS(validateResult).json[item.jsonKey].errormess.errorHint}>
                          {toJS(validateResult).json[item.jsonKey].errormess.errorHint}
                        </span>
                        <span className="log"
                          onClick={() => {
                          Modal.warning({
                            content: toJS(validateResult).json[item.jsonKey].errormess.errorString,
                          });
                        }}
                        >{getLabel(17480, '查看日志')}</span>
                      </span>
                    )
                  }
                </div>
              ))
          }
        </div>
        }
      </div>
    </div>
  );
};
